{% extends "_base.html" %}
{% load bootstrap3 %}
{% load staticfiles %}

{% block  title %}终端日志列表{% endblock %}

{% block header %}
<link rel="stylesheet" href="{% static 'plugins/bootstrap-dialog/css/bootstrap-dialog.css' %}">
<link rel="stylesheet" href="{% static 'plugins/asciinema/asciinema-player.css' %}">
{% endblock header %}

{% block left %}
    {% include "_left.html" with cmdb_sshlog_active="active" %}
{% endblock left %}



{% block page-content %}


    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-10">
            <h2>资产管理</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="/">主页</a>
                </li>
                <li>
                    终端命令
                </li>
                <li class="active">
                    <strong>终端操作回放</strong>
                </li>
            </ol>
        </div>
        <div class="col-lg-2">

        </div>
    </div>


    <div class="row wrapper wrapper-content animated fadeInRight">
        <div class="row col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>终端登陆日志</h5>

                </div>
                <div class="ibox-content">
                    {% if error %}
                    {{ error }}
                    {% endif %}
                    <table class="table table-striped table-bordered table-hover dataTables-example" id="tb_images">
                        <thead>
                            <tr>
                                <th>主机</th>
                                <th class="col-xs-2">用户</th>
                                <th class="col-xs-2">开始时间</th>
                                <th class="col-xs-2">结束结束</th>
                                <th class="col-lg-3">命令列表</th>
                                <th class="col-xs-1">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        
                            {% for o in object_list %}
                            <tr>
                                <td>{{ o.host }}</td>
                                <td>{{ o.user }}</td>
                                <td>{{ o.start_time }}</td>
                                <td>{{ o.end_time }}</td>
                                <td>{{ o.cmds }}</td>

                                <td>
                                    {# <button type="button" class="btn btn-primary btn-xs">详情</button> #}
                                    <a class="btn btn-primary btn-xs" href="/admin/cmdb/ssh_log/{{ o.id }}/change/" target="_blank">详情</a>
                                    {% if o.end_time %}
                                    <button type="button" class="btn btn-success btn-xs" id="{{ o.log }}">播放</button>
                                    {% else %}
                                    <button type="button" class="btn btn-info btn-xs" id="{{ o.channel }}">监视</button>
                                    {% endif %}

                                </td>
                            </tr>
                            {% endfor %}


                        </tbody>

                    </table>

                </div>
            </div>
        </div>


    </div>

{% endblock %}


{% block footer-js %}

<script src="{% static 'plugins/bootstrap-dialog/js/bootstrap-dialog.js' %}"></script>
<script src="{% static 'plugins/asciinema/asciinema-player.js' %}"></script>

<script type="application/javascript">

    $( ".btn-success, .btn-info" ).click(function (){
        // console.log($(this));
        // console.log(this.parentElement.id);
        var host = this.parentElement.parentElement.children[0].textContent;
        var user = this.parentElement.parentElement.children[1].textContent;
        var start_time = this.parentElement.parentElement.children[2].textContent;

        var div_username = 'User: '+'<span class="text-info">'+user+'' + '</span> ';
        var div_host = 'Host: '+'<span class="text-info">' + host + '</span> ';
        var div_time = 'Start: ' + '<span class="text-info">'+start_time +'</span> ';
        var title = div_username + div_host + div_time;

        if (this.className=="btn btn-success btn-xs") {
            // 回放
            var logurl = "{% url 'media' 'sshreplay' %}/" + this.id;
            // console.log(logurl);
            var message = "<asciinema-player src='"+logurl+"'></asciinema-player>"
            var size=BootstrapDialog.SIZE_NORMAL;
        } else {
            // 监视
            var monurl = "{% url 'cmdb:sshmonitor' '' %}" + this.id;
            // console.log(monurl);
            var message = $('<div style="overflow: auto;background-color: rgba(0, 0, 0, 0);"></div>').load(monurl);
            var size=BootstrapDialog.SIZE_WIDE;
        }

        var cssclass='primary-default';

        BootstrapDialog.show({
            title: title,
            type: BootstrapDialog.TYPE_DEFAULT,
            message: message,
            size:size,
            draggable: true,
            cssClass: cssclass,
        });
        // return false;

    });

</script>

{% endblock footer-js %}


